<template>
   
   <!--
   使用场景：vue变量控制标签的样式
   -->
    <p :class="{red_str:bool}">动态class的样式</p>
    <p :class="{red_str:bool,hello:bool}">多个参数定义</p>
    <p :class="classObj">对象形式的样式</p>
</template>

<script setup>
import { ref } from 'vue';

const bool = ref(true)
const classObj = ref(
    {
        red_str:true,
        hello:true,
    }
)
</script>

<style scoped>
.red_str{
    color: red;

}
.hello{
    font-size: 30px;
}
</style>